﻿
<!--<link rel="stylesheet" href="../../../bootstrap/css/bootstrap-datepicker.min.css">-->
<link rel="stylesheet" href="../../../bootstrap/css/bootstrap-datetimepicker.min.css">
<style>
	.imgBtn{
		display: inline;
		padding: 12px;
		width: 75px;
		height: 35px;
		line-height: 35px;
		border: 1px solid #23c6c8;
		background: #23c6c8;
		color: #fff;
		text-align: center;
		font-size: 14px;
		border-radius: 3px;
		overflow: hidden;
		position: relative;
		vertical-align: center;
	}
	.imgBtn:hover{
		border: 1px solid #23babc;
		background: #23BABC;
	}
	.imgBtn input{
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

</style>


<button  id="mallModal"  data-toggle="modal" data-target=".bd-example-modal-sm"></button>

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	<div class="modal-dialog" role="document" >
		<div class="modal-content" style="width:120%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >消费日期：</label>
							<div class="col-md-10">
								<input data-date-format="yyyy-mm-dd"
									   class="form-control" id="datepicker">
							</div>
						</div>

						<div class="form-group row" v-if="expenditure.id==null">
							<label style="display:inline;margin-top: 3%" >地区：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<select class="form-control" v-model="areaVal" @change="getProAndEmployee">
									<option v-for="obj in areaList" :value="obj" >{{obj.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >项目：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<select class="form-control" v-model="projectVal" >
									<option v-for="obj in proList" :value="obj">{{obj.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group row" v-if="expenditure.id==null">
							<label style="display:inline;margin-top: 3%" >员工姓名：</label>
							<div class="col-md-10">
								<select class="form-control" v-model="employeeVal" >
									<option v-for="obj in employeeList" :value="obj">{{obj.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >金额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<input type="text"  v-model.number="expenditure.price"
									   class="form-control"   placeholder="请输入金额:">
							</div>
						</div>
						<div class="form-group row"  >
							<label style="display:inline;margin-top: 3%" >账单照片：</label>
							<div class="col-md-10">
								<label class="imgBtn" style="display: inline;padding: 12px;width: 75px;height: 35px;
								line-height: 35px;border: 1px solid #23c6c8;background: #23c6c8;color: #fff;text-align:
								center;font-size: 14px;border-radius: 3px;overflow: hidden;
								position: relative;vertical-align: center;">
									<span id="selects">选择照片</span>
									<input type="file" class="file" style="width:50px;position: absolute;left: 0;top: 0;opacity: 0;"
										   @change="uploadFile($event)"/>
								</label>
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<img width="80px" height="80px" style="margin-left:10px;margin-bottom: 5px"
									 v-for="(img,index) in imgList"
									 :src="img" @click="removeImg(index)"/>
							</div>
						</div>

						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >备注：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<textarea   v-model="expenditure.notes"
									   class="form-control"   placeholder="请输入备注:">
								</textarea>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" @click="saveOrUpdate()">保存</button>
				<button type="button" id="closeModal" class="btn btn-secondary" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalLong1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle1" aria-hidden="true">
	<div class="modal-dialog" role="document" >
		<div class="modal-content" style="width:120%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle1" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" style="font-size: 25px">
						<div class="form-group row" >
							<label style="display:inline;margin-top: 3%;" >
								<b>消费日期：</b><span id="datepicker1"></span></label>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;<b>地区：</b> {{expenditure.aname}}</label>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;<b>项目：</b> {{expenditure.projectName}}</label>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >
								<b>员工姓名：</b> {{expenditure.uname}}</label>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;<b>金额：</b>{{expenditure.price}}</label>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" ><b>账单照片：</b>
								<img width="80px" height="80px" style="margin-left:10px;margin-bottom: 5px"
									 v-for="img in imgList"
									 :src="img" />
							</label>
						</div>

						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;<b>备注：</b>{{expenditure.notes}}</label>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
<!--				<button type="button" class="btn btn-primary" @click="saveOrUpdate()">保存</button>-->
				<button type="button" class="btn btn-success mt-2 mr-2"
						@click="updateStatus(expenditure.id,'2')" v-if="expenditure.status==0"
						data-dismiss="modal"
				>审核通过</button>
				<button type="button" class="btn btn-danger mt-2 mr-2"
						@click="updateStatus(expenditure.id,'1')" v-if="expenditure.status==0"
						data-dismiss="modal"
				>驳回请求</button>

				<button type="button" class="btn btn-light mt-2 mr-2"
						v-if="expenditure.status==2"
				>审核通过</button>
				<button type="button" class="btn btn-light mt-2 mr-2"
						v-if="expenditure.status==2"
				>驳回请求</button>

				<button type="button" class="btn btn-success mt-2 mr-2"
						@click="updateStatus(expenditure.id,'2')"	v-if="expenditure.status==1"
						data-dismiss="modal"
				>审核通过</button>
				<button type="button" class="btn btn-light mt-2 mr-2"
						v-if="expenditure.status==1"
				>驳回请求</button>
				<button type="button" class="btn btn-secondary mt-2 mr-2" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>




<div class="modal fade" id="exampleModalLong2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle2" aria-hidden="true">
	<div class="modal-dialog" role="document" >
		<div class="modal-content" style="width:120%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle2" style="font-weight: bold" >选择数据归档日期范围</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" >
						<div class="form-group row" >
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<label style="display:inline;margin-top: 3%;" >
								开始日期：<input data-date-format="yyyy-mm-dd" style="width:110px"
													   id="datepicker4"></label>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<label style="display:inline;margin-top: 3%;" >
								结束日期：<input data-date-format="yyyy-mm-dd" style="width:110px"
												id="datepicker5"></label>
						</div>
<!--						<div class="form-group row" >-->

<!--						</div>-->

					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success mt-2 mr-2"
						@click="dataArchiving()"
				>开始归档</button>
				<button type="button" class="btn btn-secondary mt-2 mr-2" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>






<div class="modal fade" id="exampleModalLong3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle3" aria-hidden="true">
	<div class="modal-dialog" role="document" >
		<div class="modal-content" style="width:120%">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle3" style="font-weight: bold" >批量审核</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<h1>确认要通过选中的数据吗？</h1>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success mt-2 mr-2"
						@click="batchExamine"
				>批量审核通过</button>
				<button type="button" class="btn btn-secondary mt-2 mr-2" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>





                <!-- Products view Start -->
				<div class="row">
                    <!-- Styled Table Card-->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card table-card">
                            <div class="card-body">
								<table  class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<thead style="text-align: center" >
										<tr>

											<td style="font-size:20px">消费月份:</td>
											<td style="width: 250px">
												<input data-date-format="yyyy-mm"
													   class="form-control" id="datepicker3">
											</td>

											<td style="font-size:20px">消费日期:</td>
											<td style="width: 250px">
												<input data-date-format="yyyy-mm-dd"
													   class="form-control" id="datepicker2">
											</td>

											<td style="font-size:20px">员工姓名:</td>
											<td style="width: 250px" >
												<select  class="form-control" v-model="searchExpenditure.uname">
													<option  value="">查看全部</option>
													<option v-for="obj in searchEmployeeList" :value="obj.name">{{obj.name}}</option>
												</select>
											</td>


										</tr>
										<tr>
											<td style="font-size:20px">审核状态:</td>
											<td style="width: 250px" >
												<select  class="form-control" v-model="searchExpenditure.status">
													<option  value="">查看全部</option>
													<option  value="0">待审核</option>
													<option  value="2">审核通过</option>
													<option  value="1">驳回请求</option>
												</select>
											</td>
											<td style="font-size:20px">地区：</td>
											<td style="width: 250px">
												<select  class="form-control" v-model="searchExpenditure.aname">
													<option  value="">查看全部</option>
													<option v-for="obj in searchAreaList" :value="obj.name">{{obj.name}}</option>
												</select>
											</td>
											<td style="font-size:20px">项目：</td>
											<td style="width: 250px">
												<select  class="form-control" v-model="searchExpenditure.projectName">
													<option  value="">查看全部</option>
													<option v-for="obj in searchProjectList" :value="obj.name">{{obj.name}}</option>
												</select>
											</td>

											<td colspan="2"></td>
<!--											<td colspan="4" style="text-align: left">-->
<!--												<button type="button" class="btn btn-primary mt-2 mr-2" @click="searchList">搜索</button>-->
<!--												<button type="button" class="btn btn-primary mt-2 mr-2"-->
<!--														data-toggle="modal" data-target="#exampleModalLong" @click="openAdd" >添加</button>-->
<!--												<button type="button" class="btn btn-primary mt-2 mr-2" @click="exportExpenditure">导出数据</button>-->
<!--												<button type="button" class="btn btn-primary mt-2 mr-2" @click="importExpenditure">导入数据</button>-->
<!--												<button type="button" class="btn btn-primary mt-2 mr-2" @click="downloadTemplate">下载导入模板</button>-->
<!--											</td>-->
										</tr>
										<tr>
											<td colspan="6" style="text-align: left">
												<button type="button" class="btn btn-primary mt-2 mr-2" @click="searchList">搜索</button>
												<button type="button" class="btn btn-primary mt-2 mr-2"
														data-toggle="modal" data-target="#exampleModalLong" @click="openAdd" >添加</button>
												<button type="button" class="btn btn-primary mt-2 mr-2" @click="exportExpenditure">导出数据</button>
												<button type="button" class="btn btn-primary mt-2 mr-2" @click="openImportExpenditure">导入数据</button>
												<input id="importExpenditureId" type="file" class="file"
													   style="width:50px;position: absolute;left: 0;top: 0;opacity: 0;"
													   @change="importExpenditure($event)"/>
												<button type="button" class="btn btn-primary mt-2 mr-2" @click="downloadTemplate">下载导入模板</button>
												<button type="button" class="btn btn-primary mt-2 mr-2"
														data-toggle="modal"  data-target="#exampleModalLong3">批量审核</button>
												<button type="button" class="btn btn-primary mt-2 mr-2"
														data-toggle="modal" data-target="#exampleModalLong2">数据归档</button>
											</td>
										</tr>
								</thead>

								</table>
                               <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<thead style="font-size:25px">
										<tr align="center">
											<th><input type="checkbox" id="checkAll" @click="clickCheckAll"/></th>
											<th>序号</th>
											<th>消费日期</th>
											<th>地区</th>
											<th>员工姓名</th>
											<th>项目</th>
											<th>金额</th>
											<th>状态</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(obj,index) in expenditureList" align="center">
											<td style="font-size:25px"><input type="checkbox" class="checkSingle" :value="obj.id" @click="clickCheckSingle($event)" name="record"></td>
											<td style="font-size:25px">{{index+1}}</td>
											<td style="font-size:25px">{{obj.createTime | formatDate}}</td>
											<td style="font-size:25px">{{obj.aname}}</td>
											<td style="font-size:25px">{{obj.uname}}</td>
											<td style="font-size:25px">{{obj.projectName}}</td>
											<td style="font-size:25px">{{obj.price | formatPrice }}</td>
											<td style="font-size:25px;color:deepskyblue" v-if="obj.status==0">待审核</td>
											<td style="font-size:25px;color: red" v-if="obj.status==1">驳回请求</td>
											<td style="font-size:25px;color: blue" v-if="obj.status==2">审核通过</td>

											<td>
												<div >
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="openEdit(obj.id,obj.aid)"
															data-toggle="modal" data-target="#exampleModalLong"
														>修改</button>
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="checkDetail(obj.id)"
															data-toggle="modal" data-target="#exampleModalLong1"
													>查看详情</button>


<!--													<button type="button" class="btn btn-danger mt-2 mr-2"-->
<!--															@click="delById(obj.id)">删除</button>-->
												</div>
											</td>
										</tr>
									</tbody>
								</table>

								<div class="card-body">
									<div class="int-blog-pagination">
										<span style="font-size: 20px;font-weight: bold;line-height:60px;height: 60px;text-align: center;float: right">
											共有{{total}}条数据；
											每页{{pageSize}}条数据；
											共有{{sumPageSize}}页数据；
										</span>
										<ul class="pagination" style="width:40%;float: right" v-if="sumPageSize>10">

											<li class="page-item"><a class="page-link" @click="selectPage(-1)"><i class="fas fa-chevron-left"></i>上一页</a></li>
											<li class="page-item" v-for="index in pageCheckStartList" :id="index"><a class="page-link"  @click="clickPage(index)">{{index}}</a></li>

											<li class="page-item" v-if="pageCheck"><a class="page-link" href="javascript:;">...</a></li>
											<li class="page-item" v-for="index in pageCheckEndList" :id="index"><a class="page-link"  @click="clickPage(index)">{{index}}</a></li>
											<li class="page-item"><a class="page-link" @click="selectPage(1)">下一页 <i class="fas fa-chevron-right"></i></a></li>
										</ul>
										<ul class="pagination" style="width:40%;float: right" v-if="sumPageSize<10">

											<li class="page-item"><a class="page-link" @click="selectPage(-1)"><i class="fas fa-chevron-left"></i>上一页</a></li>
											<li class="page-item" v-for="index in sumPageSize" :id="index"><a class="page-link"  @click="clickPage(index)">{{index}}</a></li>
											<li class="page-item"><a class="page-link" @click="selectPage(1)">下一页 <i class="fas fa-chevron-right"></i></a></li>
										</ul>
									</div>
								</div>

                            </div>
                        </div>
                    </div>
                </div>



<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title h4" id="mySmallModalLabel">导入提示</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body" style="color:red">
				<div v-for="msg in importMsg">{{msg}}</div>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalDataArch" tabindex="-1" aria-labelledby="exampleModalLabelDataArch" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabelDataArch">确认归档</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				您确定要归档{{dataArchivingStartDate}} 至 {{dataArchivingEndDate}} 的数据嘛？
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" @click="confirmDataArchiving">确认归档</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


<script src="../../../bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="../../../bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>

<script>

	new Vue({
		el:"#app",
		data:{
			expenditureList:[],
			total: 0,
			currentPage: 1,
			pageSize: 10,
			sumPageSize: 0,
			pageCheckStartList: [],
			pageCheck: true,
			pageCheckEndList: [],
			modalTitle: '',
			expenditure: {id:null},
			searchExpenditure: {"uname":"","projectName":"","createTime":"","aname":"","searchMonth":"","status":""},
			searchMonth:"",
			areaVal:{},
			areaList: [],
			projectVal:{},
			removeImgFlag: 0,
			proList: [],
			employeeVal:{},
			employeeList: [],
			searchAreaList: [],
			searchEmployeeList: [],
			searchProjectList: [],
			imgList: [],
			detail: 0,
			importMsg: "",
			dataArchivingFlag: 0,
			dataArchivingStartDate: null,
			dataArchivingEndDate: null,
			ids: []
		},
		created:function (){
			this.selectList()
			this.searchArea()
			this.searchEmployee()
			this.searchPro()
			// setTimeout(() => {
			// 	this.addClass()
			// }, 500)
		},
		methods:{
			selectList:function () {
				axios.post(
						"/admin/expenditure/getList/"+this.currentPage+"/"+this.pageSize,this.searchExpenditure
				).then(response=>{
					this.expenditureList = response.data.list
					this.total = response.data.total
					this.sumPageSize = Math.ceil(this.total / this.pageSize)
					if(this.sumPageSize>7){
						this.pageCheckStartList = []
						if(this.currentPage<(this.sumPageSize-4)){
							for (let i = this.currentPage; i < this.currentPage+3; i++) {
								this.pageCheckStartList.push(i)
							}
							this.pageCheck = true
						}else{
							for (let i = this.sumPageSize-5; i < this.sumPageSize-2; i++) {
								this.pageCheckStartList.push(i)
							}
							this.pageCheck = false
						}
						this.pageCheckEndList = []
						for (let i = this.sumPageSize-3; i < this.sumPageSize; i++) {
							this.pageCheckEndList.push(i+1)
						}
					}
					//this.addClass()
					setTimeout(() => {
						this.addClass()
					}, 150)
				})
			},
			selectPage:function (index){
				this.currentPage = this.currentPage + index
				if(this.currentPage<=1){
					this.currentPage=1
				}
				if(this.currentPage>this.sumPageSize){
					this.currentPage = this.sumPageSize
				}
				this.selectList()
			},
			clickPage:function (index){
				this.currentPage = index
				this.selectList()
			},
			addClass:function (){
				for (let i = 0; i <= this.sumPageSize; i++) {
					$("#"+i).removeClass("active");
				}
				$("#"+(this.currentPage)).addClass("active");
			},
			searchList:function (){

				// 分页重置
				this.currentPage=1
				this.searchExpenditure.createTime = ""
				if($("#datepicker2").val()!=''){
					this.searchExpenditure.createTime = $("#datepicker2").val();
				}

				this.searchExpenditure.searchMonth = ""
				if($("#datepicker3").val()!=''){
					let date = new Date($("#datepicker3").val())
					let month = date.getMonth()+1;
					if(month<10){
						month = "0"+month
					}
					let searchMonth = date.getFullYear()+"-"+month+"-01"
					this.searchExpenditure.searchMonth = searchMonth;
				}

				this.selectList()
			},
			exportExpenditure:function (){
				this.searchMonth = ""
				if($("#datepicker3").val()!=''){
					let date = new Date($("#datepicker3").val())
					let month = date.getMonth()+1;
					if(month<10){
						month = "0"+month
					}
					let searchMonth = date.getFullYear()+"-"+month+"-01"
					this.searchMonth = searchMonth;
				}
				window.location.href = "/admin/expenditure/export?employeeName="+this.searchExpenditure.uname+"&projectName="+this.searchExpenditure.projectName+"&searchMonth="+this.searchMonth+"&searchDate="+this.searchExpenditure.createTime+"&areaName="+this.searchExpenditure.aname+"&status="+this.searchExpenditure.status;
			},
			openImportExpenditure:function (){
				$("#importExpenditureId").click();
			},
			importExpenditure:function (val){
				const form=new FormData();
				form.append("importExpenditureFile",val.target.files[0]);
				axios.post("/admin/expenditure/importExpenditure",form).then(response=>{
					this.searchList()
					this.importMsg = response.data.list;
					$("#mallModal").click();
					$("#importExpenditureId")[0].value='';
					let fileInput = document.getElementById('importExpenditureId');
					fileInput.value = ''; // 清除文件输入的值
				})
			},
			downloadTemplate:function (){
				window.location.href = "/admin/expenditure/downloadTemplate"
			},
			dataArchiving:function (){ // 数据归档
				this.dataArchivingStartDate = $("#datepicker4").val()
				this.dataArchivingEndDate = $("#datepicker5").val()

				$('#exampleModalDataArch').modal('show');
			},
			confirmDataArchiving:function (){
				axios.get(
						"/admin/expenditure/dataArchiving/"+this.dataArchivingStartDate+"/"+this.dataArchivingEndDate,
				).then(response=>{
					$("#datepicker4").val('')
					$("#datepicker5").val('')
					$('#exampleModalDataArch').modal('hide');
					$('#exampleModalLong2').modal('hide');
					this.searchList()
				})
			},
			openEdit:function(id,aid){
				this.detail = 0
				this.modalTitle = "修改"
				this.expenditure = {}
				this.imgList = []
				this.areaVal = {}
				this.projectVal={}
				this.employeeVal={}
				this.selectPro(aid)
				this.findById(id)
			},
			findById:function (id){
				axios.get(
						"/admin/expenditure/findById/"+id,
				).then(response=>{
					this.expenditure = response.data
					this.projectVal.id = this.expenditure.projectId
					this.projectVal.name = this.expenditure.projectName
					this.imgList = this.expenditure.imgList
					$("#datepicker").val(this.formatDateVal(this.expenditure.createTime))
					$("#datepicker1").text(this.formatDateVal(this.expenditure.createTime))
					console.log(this.expenditure)
				})
			},
			checkDetail:function (id){
				this.openEdit(id)
				this.modalTitle = "详情"
				this.detail = 1
			},
			openAdd:function(){
				this.modalTitle = "添加"
				this.expenditure = {}
				this.imgList = []
				this.areaVal = {}
				this.areaVal = {}
				this.projectVal={}
				this.employeeVal={}
				this.selectArea()
				$('#datepicker').datepicker("setDate", new Date());
			},
			selectPro:function (aid){
				axios.get(
						"/admin/area/findById/"+aid
				).then(response=>{
					this.proList = JSON.parse(response.data.projectList)
					console.log(this.proList)
				})
			},
			searchPro:function (){
				axios.get(
						"/admin/project/getList"
				).then(response=>{
					this.searchProjectList = response.data
				})
			},
			selectArea:function (){
				axios.get(
						"/admin/area/selectListAll"
				).then(response=>{
					this.areaList = response.data
				})
			},
			searchArea:function (){
				axios.get(
						"/admin/area/selectListAll"
				).then(response=>{
					this.searchAreaList = response.data
				})
			},
			getProAndEmployee:function (){
				console.log(this.areaVal.id)
				// 选择区域联动项目
				this.selectPro(this.areaVal.id)
				// 选择区域联动员工
				this.selectEmployee(this.areaVal.id)
			},
			selectEmployee:function(aid) {
				axios.get(
						"/admin/employee/findByAid/"+aid
				).then(response=>{
					console.log("=============")
					this.employeeList = response.data
					console.log(this.employeeList)
				})
			},
			searchEmployee:function() {
				axios.get(
						"/admin/employee/getList"
				).then(response=>{
					this.searchEmployeeList = response.data
				})
			},
			saveOrUpdate:function (){
				this.expenditure.projectId = this.projectVal.id
				this.expenditure.projectName = this.projectVal.name
				this.expenditure.createTime = $("#datepicker").val()
				this.expenditure.imgList = this.imgList
				if(this.expenditure.id==null){
					this.expenditure.aid = this.areaVal.id
					this.expenditure.aname = this.areaVal.name
					this.expenditure.openid = this.employeeVal.openid
					this.expenditure.uname = this.employeeVal.name
				}
				this.expenditure.price = this.expenditure.price+""
				axios.post("/admin/expenditure/saveOrUpdate",this.expenditure).then(response=>{
					$("#closeModal").click()
					this.selectList()
				})
			},
			removeImg:function (index){ // 上传错照片，可以双击照片删除
				this.removeImgFlag++;
				if(this.removeImgFlag==2){
					this.imgList.splice(index,1)
					this.removeImgFlag = 0
				}
			},
			delById:function (id){
				axios.get("/admin/expenditure/deleteById/"+id).then(response=>{
					this.selectList()
				})
			},
			updateStatus:function (id,status){
				axios.get("/admin/expenditure/updateStatus/"+id+"/"+status).then(response=>{
					this.selectList()
				})
			},
			uploadFile:function (val){
				console.log(val.target.files[0].name)
				const form=new FormData();
				form.append("imgFile",val.target.files[0]);
				axios.post("/admin/expenditure/uploadFile",form).then(response=>{
					console.log(response.data);
					this.imgList.push("https://www.krwl.top/img/"+response.data)
				})
			},
			formatDateVal(value) {
				let date = new Date(value)
				if(date.getDate()>=10){
					return date.getFullYear()+"-"+0+(date.getMonth()+1)+"-"+date.getDate();
				}else{
					return date.getFullYear()+"-"+0+(date.getMonth()+1)+"-"+0+date.getDate();
				}
			},
			clickCheckAll(){
				$('#checkAll').each(function() {
					$('.checkSingle').prop('checked', this.checked);
				});
				let exList = this.expenditureList
				let newIds = []
				$('#checkAll').change(function() {
					if($(this).is(":checked")){
						for (let i = 0; i < exList.length; i++) {
							newIds.push(exList[i].id)
						}
					}else{
						newIds = []
					}
				});
				this.ids = newIds
			},
			clickCheckSingle(obj){
				if(obj.target.checked){
					this.ids.push(parseInt(obj.target.value))
				}else{
					let index = this.ids.indexOf(parseInt(obj.target.value))
					this.ids.splice(index,1)
				}
			},
			batchExamine(){
				if(this.ids.length<=0){
					$('#exampleModalLong3').modal('hide');
					return;
				}

				axios.post("/admin/expenditure/batchExam",this.ids).then(response=>{
					$('#exampleModalLong3').modal('hide');
					$('input[type="checkbox"]').prop('checked', false);
					this.ids = []
					this.selectList()
				})
			}
		},
		filters: {
			formatDate(value) {
				let date = new Date(value)
				return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
			},
			formatPrice(price){
				let priceStr = price+''
				const thousandSeparated = priceStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
				return thousandSeparated;
			}
		}
	});

	$('#datepicker').datepicker({
		weekStart: 1,
		daysOfWeekHighlighted: "6,0",
		autoclose: true,
		todayHighlight: true,
		language: "zh-CN"
	});
	$('#datepicker').datepicker("setDate", new Date());


	$('#datepicker2').datepicker({
		weekStart: 1,
		daysOfWeekHighlighted: "6,0",
		autoclose: true,
		todayHighlight: true,
		language: "zh-CN",
		clearBtn: true
	});
	// $('#datepicker2').datepicker("setDate", new Date());

	$('#datepicker3').datepicker({
		// weekStart: 1,
		format: 'yyyy-mm',
		startView: 1,
		// daysOfWeekHighlighted: "6,0",
		autoclose: true,
		maxViewMode: 2,
		minViewMode: 1,
		//todayHighlight: true,
		language: "zh-CN",
		clearBtn: true
	});
	// $('#datepicker3').datepicker("setDate", new Date());

	$('#datepicker4').datepicker({
		weekStart: 1,
		daysOfWeekHighlighted: "6,0",
		autoclose: true,
		todayHighlight: true,
		language: "zh-CN",
		clearBtn: true
	});

	$('#datepicker5').datepicker({
		weekStart: 1,
		daysOfWeekHighlighted: "6,0",
		autoclose: true,
		todayHighlight: true,
		language: "zh-CN",
		clearBtn: true
	});

</script>

